<template>
	<view class="wrap bggrey scrollWrapper" style="height: 100%;">
		<view class="content">
			<view class="product-details-shipin c_img" style="pointer-events: auto;">
				<image class="img" :src="pdata.projectImgurl" mode="widthFix"></image>
			</view>

			<view class="padding product-details " style="pointer-events: auto;">
				<view class="title-row ">
					{{pdata.projectName}}
				</view>
				<view class="product-details-info1">
					<view class="row fc-bet">
						<view class="left">
							目标金额
						</view>
						<view class="right">
							{{pdata.projectScale}}
						</view>
					</view>
					<view class="progress-box">
						<view class="progress-bar-txt fc-bet">
							<text>进度:</text>
							<text>{{ pdata.progress }}%</text>
						</view>
						<view class="progress-bar">
							<view class="slider" :style="{ width:pdata.progress + '%' }"></view>
						</view>
					</view>
				</view>
				<view class="product-details-info2">
					<view class="fcc row">
						<view class="col">
							<view class="b">{{ pdata.projectCycle }}天</view>
							<view>项目周期</view>
						</view>
						<view class="col">
							<view class="b">{{ pdata.startingAmount }}元</view>
							<view>起购金额</view>
						</view>
						<view class="col">
							<view class="b">{{ pdata.expectedProfit }}元</view>
							<view>预计分红</view>
						</view>
					</view>
					<view class="fcc row">
						<view class="col">
							<view class="b">{{ pdata.returnRate }}%</view>
							<view>项目收益</view>
						</view>
						<view class="col">
							<view class="b">{{ pdata.purchaseLimit }}</view>
							<view>限购次数</view>
						</view>
						<view class="col">
							<view class="b">{{ pdata.projectCycle  }}</view>
							<view>结算周期</view>
						</view>
					</view>
				</view>
				<view class="product-details-info3">
					<view class="row f-bet">
						<view class="left">
							<!-- <image src="/static/index/img/c-chart.png" alt=""></image> -->
						</view>
						<view class="right flex1">
							<p>
								收益说明：项目周期
								<span class="span_color">{{pdata.projectCycle}}天</span>，
								<span class="span_color">每天</span>
								结算一次收益，待项目到期后返还最后一次收益和本金，节假日照常收益。
							</p>
						</view>
					</view>
					<view class="row f-bet">
						<view class="left">
							<!-- 	<image src="/static/index/img/c-money.png" alt=""></image> -->
						</view>
						<view class="right flex1">
							<p>
								可用资金：￥{{getUserInfo.availableBalance}}
							</p>
						</view>
					</view>
				</view>
				<view class="tab-bar-box J-nav-tab-fun">
					<u-tabs :list="tabs" @click="changeTab"></u-tabs>
				</view>
				<view class="tab-bar-contents">
					<view v-if="soutid==0" class="tab-bar-content product-details-content padding xmxq"
						style="display: block;">
						{{pdata.projectDetails}}
					</view>
					<view v-else class="">
						<view class="padding ">
							<view class="content psre" style="padding-bottom: 51px;">
								<view class="title_box pd15 pt5">
									<view class="mt15">
										<view class="bl ct fs18">
											<text>招财猫网络科技有限公司项目投资协议（范本）</text>
										</view>
									</view>
									<view class="bl rt fs pt5">
										合同编号：
									</view>
								</view>
								<view class="td bl fs14 fw700 pt5">
									甲方（投资方）：
								</view>
								<view class="td bl fs14 fw700 pt5">
									乙方（管理方）：<text>招财猫网络科技有限公司</text> 
								</view>
								<view class="td bl fs14 fw700 pt5">
									丙方（担保方）：{{pdata.guaranteeCompany}}
								</view>
								<view class="td bl fs14 pt5">
									甲乙丙三方经友好协商，本着平等自愿、诚实信用的原则，就甲方使用乙方提供的本网站所有服务的
								</view>
								<view class="td bl fs14 fw700 pt5">
									有关事项达成如下协议：
								</view>
								<view class="bl fs14 fw700">
									一、理财投资明细
								</view>
								<view class="tbody bor">
									<view class="trr dsfl aitem bi20" v-for="(item, index) in investmentDetails"
										:key="index">
										<view class="td miw45 maw45 pd10 borr">
											<view class="bl tali">
												<text>{{ item.label }}</text>
											</view>
										</view>
										<view class="td miw55 maw55 pd10">
											<view class="bl tali">
												<text>{{ item.value }}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="trr pt5 pb5 dsfl aitem">
									<view class="td bl fs14">
										二、理财期未满，甲方不得擅自终止本协议，否则，乙方将取消为甲方的理财服务，甲方不享受任何理财收益，甲方投资时必须看清楚投资项目的一切事宜，按照公司要求进行投资，如有违反规定，甲方并承担由此所引起的一切损失。
									</view>
									<view class="td bl fs14">
										三、理财方式以网络投资平台的形式进行合作。理财金由甲方账户划转到乙方的综合理财账户上进行具体的理财操作，由于甲方全权委托乙方理财，因此在公司运营管理，品牌拓展，连锁加盟或其它实业的投资风险由乙方承担，乙方全面负责所有项目资金的安全性，然后才考虑资金的收益，甲方不得以任何形式干预乙方的理财操作，所有收益是按约定周期发放至甲方的平台账户。
									</view>
									<view class="">
										四、乙方对甲方投资资金负有控制风险的责任，必须勤勉尽责。如果投资有亏损情况，则无论亏损大小由乙方承担全部损失，按合同承诺支付给甲方，如果乙方出现违约将由担保机构方（丙方）履行保本保息承诺兑付义务。
									</view>
									<view class="">
										五、保密义务
										甲乙双方对其通过接触和通过其他渠道得知的有关各方的商业机密等应该严格保密，对所有项目资料严格保密，不得向任何其他人员及机构透露相关信息。
									</view>
									<view class="">
										<view class="">
											六、合同生效
										</view>
										<view class="">
											<view class="">
												1、本协议经投资人通过投资平台点击确认投资后自动生成并签订，本协议自生成时生效。
											</view>
											<view class="">
												2、本协议履行期间，各方如发生争议或者纠纷，应友好协商解决；如协商不成，任何一方有权向本方所在地人民法院提起仲裁或起诉。
											</view>
											<view class="">
												3、本协议采用电子文本形式制成，各方均认可该形式的法律效力。
											</view>

										</view>
									</view>
									<view class="">
										七、理财协议一式三份，乙方一份，甲方一份，丙方一份，具有同等法律效力。
									</view>
									<view class="mt15 y-tb" style="position: relative;">
										<text>甲方：</text><text>乙方：招财猫网络科技有限公司</text>
										<!-- <image class="to-ys-right" src="../../../static/img/index/3d5bd973228537fd2f7facd190981702.png" mode=""></image> -->
									</view>
									<view class="mt15 y-tb" style="position: relative;">
										丙方：{{pdata.guaranteeCompany}}
										<!-- <image class="to-ys-left" src="../../../static/img/index/3d5bd973228537fd2f7facd190981702.png" mode=""></image> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			
			</view>
			<!-- ... Other sections ... -->

			<view class="footer-box-wrap">
				<view class="footer-height"></view>
				<view class="footer-box w750">
					<view class="m022 flex1">
						<button class="btn-blue w100 fcc" @tap="handleInvest">
							<text>立即投资</text>
						</button>
					</view>
				</view>
			</view>

			<!-- ... Other sections ... -->

		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				id: null,
				tabs: [{
					name: '项目详情',
					typeid: ''
				}, {
					name: '委托协议',
					typeid: 0
				}],
				investmentDetails: [{
						label: "项目名称",
						value: "XXXX"
					},
					{
						label: "投资人姓名",
						value: "XXX"
					},
					{
						label: "投入本金数额（下称“甲方投资本金”）",
						value: "元"
					},
					{
						label: "协议期",
						value: "日期"
					},
					{
						label: "预期收益率",
						value: "%"
					},
					{
						label: "起息日",
						value: "日期"
					},
					{
						label: "到期日",
						value: "日期"
					},
					{
						label: "应收本息（元）",
						value: "元"
					},
					{
						label: "返款方式",
						value: "按天付收益，平均返本"
					},
				],
				soutid: 0,
				pdata: [],
				show: false,
				projectDuration: '10天',
				minInvestmentAmount: '100.00',
				expectedReturns: '10.00',
				projectReturns: '1.00%',
				purchaseLimit: '不限',
				settlementCycle: '每天',
				showBanner: false,
				progressPercentage: '5.00',
				imageSource: "/upload/20230828/64ec140fa6efd16931932319414.jpg",
			};
		},
		onLoad(query) {
			this.id = query.id
		},
		computed: {
			...mapGetters(['getUserInfo']),
		},
		mounted() {
			this.getPrdetal()
		},
		methods: {
			handleInvest() {
				uni.navigateTo({
					url:'/pages/tabBar/project/touzi'
				})
			},

			getPrdetal() {

				this.$refs.uToast.show({
					type: 'loading',
					title: '正在加载',
					message: "正在加载",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
				})
				this.$request.get(`/CatProjec/${this.id}`)
					.then(res => {
						if (res.code === 200) {
							console.log(res);
							this.pdata = res.data.project;
						}
					})
					.catch(error => {
						console.error('Request failed:', error);
						// Log the full error details, including the response if available
						if (error.response) {
							console.error('Response:', error.response);
							// Check the status code and show a custom message for 500 errors
							if (error.response.status === 500) {
								this.$refs.uToast.show({
									type: 'error',
									title: '失败主题',
									message: '服务器内部错误',
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
								});
							}
						}
					});

			},
			changeTab(item) {
				console.log(item);
				this.soutid = item.index
			}
		},
	};
</script>

<style scoped>
	.c_img .img {
		width: 100%;
		height: auto;
		max-width: 100%;
		vertical-align: middle;
		border: 0
	}

	/deep/.u-tabs__wrapper__nav {
		display: flex;

		width: 95vw;
	}

	/deep/.u-tabs__wrapper__nav__item {
		width: 50%;
	}

	.title-row {
		margin-bottom: 0.64rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 0.64rem;
		font-family: PingFang;
		font-weight: 800;
		color: #222222;
	}

	.tab-bar-box {
		height: 1.56rem;
		background: #FFFFFF;
		border-radius: 0.32rem;
		margin-bottom: 0.48rem;
		display: flex;
		align-items: center;

		justify-content: space-between;
		width: 100%;
	}

	.tab-bar-contents {
		background: #ffffff;
		border-radius: 0.28rem;
	}
     .fw700 {
         font-weight: 700;
     }
     
     .fs14 {
         font-size: 11px;
		 }
	.ct {
		text-align: center;
	}

	.bl {
		display: block;
	}
   
	.fs {
		font-size: 12px;
	}
    .tali{
		text-align: left;
	}
	.rt {
		text-align: right;
		/* Add your styles here */
	}
	.pt5 {
	    padding-top: 4px;
	    box-sizing: border-box;
		    padding-bottom: 4px;
		   
	}
   .tbody {
	    border-color: #f4f4f4;
	}
	 .tbody .trr:nth-child(odd) {
	    background: #f4f4f4;
	}
   .tbody .trr .td.borr {
	    border: 1px solid #f4f4f4;
	}
	.pd10 {
	    padding: 8px;
	    box-sizing: border-box;
	}
	.miw45 {
	    min-width: 50%;
	}
	.maw45 {
	    max-width: 50%;
	}
	.bi20{
		display: flex;
		justify-content: left;
		align-items: center;
	}
   .y-tb{
	   
	       display: flex;
	       justify-content: space-between;
	       align-items: center;

   }
   .to-ys-right{
	   position: absolute;
	   right: 0.5rem;
	   width: 3rem;
	   height: 3rem;
	   top: 0rem;
   }
   .to-ys-left{
   	   position: absolute;
   	   left: 0.5rem;
   	   width: 3rem;
   	   height: 3rem;
   	   top: 0rem;
   }
</style>